<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地平线生活服务</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/static/style/ydui.css"/>
    <script src="/static/js/ydui.flexible.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script>
		wx.config(
			{$wxConfig}
		);
		wx.ready(function(){
    		wx.hideOptionMenu();
    		
    	})
	</script>
</head>
<style>
    .con-list{display: flex; flex-direction:column; margin-bottom: 0.15rem;justify-items: center;padding:0.2rem; border:0.03rem solid #eee;background:#fff;border-radius: 3px;}
	.con-list .con-title{display: flex; font-size: 0.28rem;justify-items: center;padding:0.1rem 0;border-bottom: 1px solid #ddd;}
	.con-list .con-tab{display: flex; flex-direction: row;justify-items: center;padding:0.1rem}
	.con-list .con-tab .con-num{width:1rem;font-size: 0.24rem;justify-items: center;color: #585858;justify-items: center;}
	.con-list .con-tab .con-tab-list{display: flex; flex:1; flex-direction: row;font-size: 0.14rem;color:#FF5E53;}
	.con-list .con-tab .con-tab-list .con-tab-bar{padding:0.02rem 0.03rem;border: 0.008rem solid #FF5E53; border-radius: 0.03rem;margin-left: 0.08rem;justify-items: center; }
	.con-list .con-address {font-size: 0.24rem; padding:0.1rem;justify-items: center;color: #585858;}
	.tab-panel-item.tab-active{height: 100%;} 
	.mapinit{height:100vh;margin:-0.24rem;}
	.mapinit #container{width:100%;height:100%;}
</style>
<body>
<section class="g-flexview">
    <div class="g-scrollview">
		<div class="m-tab" data-ydui-tab>
			<ul class="tab-nav">
				<li class="tab-nav-item tab-active"><a href="javascript:;">地图</a></li>
				<li class="tab-nav-item"><a href="javascript:;">列表</a></li>
			</ul>
			<div class="tab-panel">
				<div class="tab-panel-item tab-active">
					<div class="mapinit">
						<div id="container"></div>
					</div>
					
				</div>
				<div class="tab-panel-item">
					<div class="con-list">
						<div class="con-title">新兴希望洗车站</div>
						<div class="con-tab">
							<div class="con-num">2台设备</div>
							<div class="con-tab-list">
								<div class="badge badge-primary">清洁</div>
								<div class="badge badge-warning">泡沫</div>
								<div class="badge badge-danger">吸尘</div>
								<div class="badge badge-primary">消毒</div>
							</div>
						</div>
						<div class="con-address">新疆哈密市幸福路448号幸福小区南口</div>
					</div>
					<div class="con-list">
						<div class="con-title">新兴希望洗车站</div>
						<div class="con-tab">
							<div class="con-num">2台设备</div>
							<div class="con-tab-list">
								<div class="con-tab-bar">清洁</div>
								<div class="con-tab-bar">泡沫</div>
								<div class="con-tab-bar">吸尘</div>
								<div class="con-tab-bar">消毒</div>
							</div>
						</div>
						<div class="con-address">新疆哈密市幸福路448号幸福小区南口</div>
					</div>
					<div class="con-list">
						<div class="con-title">新兴希望洗车站</div>
						<div class="con-tab">
							<div class="con-num">2台设备</div>
							<div class="con-tab-list">
								<div class="con-tab-bar">清洁</div>
								<div class="con-tab-bar">泡沫</div>
								<div class="con-tab-bar">吸尘</div>
								<div class="con-tab-bar">消毒</div>
							</div>
						</div>
						<div class="con-address">新疆哈密市幸福路448号幸福小区南口</div>
					</div>
					<div class="con-list">
						<div class="con-title">新兴希望洗车站</div>
						<div class="con-tab">
							<div class="con-num">2台设备</div>
							<div class="con-tab-list">
								<div class="con-tab-bar">清洁</div>
								<div class="con-tab-bar">泡沫</div>
								<div class="con-tab-bar">吸尘</div>
								<div class="con-tab-bar">消毒</div>
							</div>
						</div>
						<div class="con-address">新疆哈密市幸福路448号幸福小区南口</div>
					</div>
				</div>
			</div>
		</div>
        <footer class="m-tabbar tabbar-fixed">
        	<a href="{:url('index/index')}" class="tabbar-item">
        		<span class="tabbar-icon">
        			<i class="icon-home"></i>
        		</span>
        		<span class="tabbar-txt">首页</span>
        	</a>
        	<a href="{:url('index/address')}" class="tabbar-item tabbar-active">
        		<span class="tabbar-icon">
        			<i class="demo-icons-discover"></i>
        		</span>
        		<span class="tabbar-txt">附近</span>
        	</a>
        	<a href="{:url('account/index')}" class="tabbar-item">
        		<span class="tabbar-icon">
        			<i class="icon-ucenter"></i>
        		</span>
        		<span class="tabbar-txt">我的</span>
        	</a>			
        </footer>
    </div>
</section>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/ydui.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=6787b252616c535173296dc527bc172a"></script>
  <script type="text/javascript">
    // 创建地图实例
    let map = new AMap.Map("container", {
      zoom: 12,
      resizeEnable: true
    });
    // 设置一个图标对象
      var icon = {
        // 图标类型，现阶段只支持 image 类型
        type: 'image',
        // 图片 url
        image:
          'https://life.lifecloud.top/static/images/icon_zb.png',
        // 图片尺寸
        size: [32, 32],
        // 图片相对 position 的锚点，默认为 bottom-center
        anchor: 'center',
      };
      var textStyle = {
        fontSize: 12,
        fontWeight: 'normal',
        fillColor: '#FF5E53',
        strokeColor: '#fff',
        strokeWidth: 2,
        fold: true,
        padding: '2, 5',
      };
      var LabelsData = [
        {
          name: '洗车站1',
          position: [117.034912,36.652674],
          zooms: [10, 20],
          opacity: 1,
          zIndex: 10,
          fold: true,
          icon,
          text: {
            // 要展示的文字内容
            content: '幸福洗车站',
            // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
            direction: 'right',
            // 在 direction 基础上的偏移量
            offset: [0, -5],
            // 文字样式
            style: textStyle,
          },
        },
        {
          name: '洗车站2',
          position: [117.089844,36.654326],
          zooms: [10, 20],
          opacity: 1,
          zIndex: 16,
          icon,
          text: {
            content: '花家地北里',
            direction: 'right',
            offset: [0, -5],
            style: textStyle,
          },
        },
        {
          name: '洗车站3',
          position: [117.08538,36.652674],
          zooms: [10, 20],
          opacity: 1,
          zIndex: 8,
          icon,
          text: {
            content: '中环南路11号院',
            direction: 'right',
            offset: [0, -5],
            style: textStyle,
          },
        },
        {
          name: '洗车站4',
          position: [117.082634,36.664517],
          zooms: [10, 20],
          opacity: 1,
          zIndex: 23,
          icon,
          text: {
            content: '合生麒麟社',
            direction: 'right',
            offset: [0, -5],
            style: textStyle,
          },
        }
      ];

      var markers = [];
      var layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        allowCollision:true,
      });
      // 图层添加到地图
      map.add(layer);

      // 初始化 labelMarker
      for (var i = 0; i < LabelsData.length; i++) {
        var curData = LabelsData[i];
        curData.extData = {
          index: i,
        };

        var labelMarker = new AMap.LabelMarker(curData);

        markers.push(labelMarker);
      }
      // 将 marker 添加到图层
      layer.add(markers);
      map.setFitView(null, false, [100, 150, 10, 10]);
	
   wx.getLocation({
			type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			success: function (res) {
				var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
				var lat = parseFloat(latitude);
				var lng = parseFloat(longitude);

				map.setCenter([lng, lat]);
				var marker = new AMap.Marker({
					position: new AMap.LngLat(longitude.toFixed(6), latitude.toFixed(6)),
					icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
					offset: new AMap.Pixel(0, 0)
				});
				////a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png
				map.add(marker);
			}
		});
	</script>
</body>
</html>